<template>
  <div class="app-container min-h-full">
    <y-form ref="formRef" :options="formOptions" @submit="submit"></y-form>
  </div>
</template>

<script>
import { getTableData } from '@/api/table'

const popupListOptions = {
  // 获取数据方法
  dataMethod: getTableData,
  formOptions: {
    items: [
      {
        field: 'keywords',
        title: '用户ID',
        itemRender: {
          name: 'VxeInput'
        }
      }
    ]
  },
  // 表格配置
  tableOptions: {
    // 表格列
    columns: [
      { field: 'userName', title: '用户名' },
      { field: 'userId', title: '用户ID' },
      { field: 'mobilePhone', title: '手机号' }
    ]
  }
}
export default {
  data() {
    return {
      formOptions: {
        titleWidth: 120,
        items: [
          {
            title: 'Popup',
            itemRender: {
              name: 'YPopup',
              props: {
                // 多选
                multiple: false,
                displayField: 'userName',
                valueField: 'userId',
                bounds: {
                  myUserName: 'userName',
                  myUserId: 'userId',
                  mobilePhone: 'mobilePhone'
                },
                listOptions: popupListOptions
              }
            }
          },
          {
            align: 'center',
            span: 24,
            itemRender: {
              name: 'VxeButtonGroup',
              options: [
                { content: '重置', type: 'reset' },
                { content: '提交', type: 'submit', status: 'primary' }
              ]
            }
          }
        ]
      }
    }
  },
  mounted() {
    this.$refs.formRef.setData({})
  },
  methods: {
    submit(data) {
      console.log(data)
    }
  }
}
</script>
